import React, {  } from 'react';

import { SketchPicker } from 'react-color';

import { Popover } from 'antd';

import { IDictionaryColorPicker } from '@/pages/SystemController/DictionaryTreeController/type';

import cls from 'classnames';

import '../styles.less';


export const DictionaryColorPicker: React.FC<IDictionaryColorPicker> = (
  props,
) => {
  return (
    <Popover
      placement={'top'}
      overlayInnerStyle={{}}
      overlayStyle={{
        padding: 0,
      }}
      trigger={'click'}
      overlayClassName={'dic-popover-color'}
      content={
        <SketchPicker
          color={props.value}
          onChange={({ hex }) => {
            if (props?.onChange) {
              props?.onChange(hex);
            }
          }}
        />
      }
    >
      <div className={cls('dic-pop-box')}>
        <div
          className={cls('dic-pop-child')}
          style={{
            background: props?.value ? props?.value : '#000000',
          }}
        />
      </div>
    </Popover>
  );
};
